<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Load JavaScript Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/websocket.js"></script>

</head>
<body>
	<div>
	<input id="username" placeholder="请输入你的用户名"/>
	<input id="toUser" placeholder="发送给的用户" />
	<input id="username" placeholder="发生内容"/>
	<textarea id="online">
		
	</textarea>
	</div>
	<button id="connect">connect</button>
	<button id="send">send</button>
	<script>
		var webSocket = null;
		$('#connect').click(
				function() {
					var url = "ws:localhost:8080/Chatroom/im.ws";
					webSocket = new WebSocket(url);
					webSocket.onopen = function(event) {
						console.log(event);
						var message = {
								type:'addUser',
								param:{id:'5627', name:'hello'}
						}
						var getUserMsg = {
								type:'getUserList',
								param:{}
						}
						webSocket.send(JSON.stringify(message));
						webSocket.send(JSON.stringify(getUserMsg));
						
					}
					/**
					 * receive Message
					 */
					webSocket.onmessage = function(event) {
						//showMsg(event.data, "get");
						var retVal = eval("(" + event.data + ")");
						console.log(retVal);
						if(retVal.type == "addUser"){
							$('#online').val($('#online').val() + retVal.data);
						}if(retVal.type == "getUserList"){
							$("#online").val(retVal.data);
						}
					}
					
				});
		$('#send').click(function(){
			var message = {
					type:'chat',
					param:{toUser:'bo', content:'hello'}
			}
			console.log(JSON.stringify(message));
			webSocket.send(JSON.stringify(message));
		});
	</script>
</body>

</html>


